<template>
  <div class="tableContainer">
    <el-table
      :data="props.treeData"
      style="
        width: 100%;
        margin-bottom: 20px;
        --el-table-current-row-bg-color: #b0c4de;
      "
      row-key="id"
      border
      table-layout="auto"
      highlight-current-row
      @row-click="rowClick"
    >
      <!-- <el-table-column type="selection" width="40" /> -->
      <el-table-column show-overflow-tooltip prop="id" label="id" width="110" />
      <el-table-column
        show-overflow-tooltip
        prop="name"
        label="工作名称"
        width="220"
      />
      <el-table-column
        show-overflow-tooltip
        prop="datastart"
        label="计划开始"
        width="105"
      />
      <el-table-column
        show-overflow-tooltip
        prop="dataend"
        label="计划完成"
        width="105"
      />
      <el-table-column
        show-overflow-tooltip
        prop="needday"
        label="工期"
        width="50"
      />
      <el-table-column
        show-overflow-tooltip
        prop="prepath"
        label="前置任务"
        width="60"
      />
      <el-table-column label="删除" width="70">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { onMounted } from "vue";
const props = defineProps(["treeData"]);
console.log(props);
const rowClick = (row, index) => {
  console.log(row);
};
</script>
<style>
.tableContainer {
  width: 100%;
  height: 90vh;
}

</style>
